<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>video</title>
<link rel="stylesheet" type="text/css" href="./videojs/video-js.min.css" />
<style>
    * {
        margin: 0;
        padding: 0;
        border: 0;
    }
    body, html, #videoBox {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    #test_video {
        width: 100%;
        height: 100%;
    }

</style>
</head>
<body>
<div id="videoBox">
    
</div>



</body>
</html>
<script type="text/javascript" src="jquery-1.9.js"></script>
<script type="text/javascript" src="./videojs/video.min.js"></script>
<script type="text/javascript" src="./videojs/videojs-flash.js"></script>

<script>
var n = 0
var id = ''
function UrlSearch() {
   var name,value; 
   var str=location.href; //取得整个地址栏
   var num=str.indexOf("?") 
   str=str.substr(num+1); //取得所有参数   stringvar.substr(start [, length ]

   var arr=str.split("&"); //各个参数放到数组里
   for(var i=0;i < arr.length;i++){ 
        num=arr[i].indexOf("="); 
        if(num>0){ 
            name=arr[i].substring(0,num);
            value=arr[i].substr(num+1);
            this[name]=value;
        } 
    } 
} 


var Request=new UrlSearch();
var player = {}
function start() {
    var rtsp = Request.rtsp || ''
        rtsp.replace(/\+/g,"/")
        rtsp.replace(/--/g,":")
        rtsp.replace(/,/g,".")
    $.ajax({
        type:"post",
        data:{url: rtsp || "rtsp://admin:a1234567@10.1.0.224:554/h264/ch1/main/av_stream"},
        url:"/streamOption/startStream",  
        success: function(dat){
            if (dat.status == 1) {
                start()
                return
            }
            $("#videoBox").html("")
            setTimeout(function(){
                $("#videoBox").html('<video id="test_video" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay>\
                    <source src="'+dat.dataMap.url+'" type="rtmp/flv" />\
                </video>')
                videojs.options.flash.swf = "./videojs/video-js.swf"
                player = videojs('test_video', {"autoplay":true,flash:{
                    swf: "./videojs/video-js.swf",
                    hls: { withCredentials: false }
                }}, function onPlayerReady() {
                    this.play()
                });
                id = dat.dataMap.timeId
                window.parent.postMessage({id:id},'*');
                setInterval(function() {
                    player.load(dat.dataMap.url); //重新加载 
                    player.play()
                }, 3*60*1000)
            }, 100)
        }
    });
}

start()


function stop() {
    if(!id) return
    $.ajax({
        type:"post",
        data:{timeId: id},
        url:"/streamOption/shutdownStream",  
        success: function(dat){
            console.log(dat)
        }
    });
}

// 心跳
function heartbeat() {
    $.ajax({
        type:"post",
        data:{timeId: id},
        url:"/streamOption/heartbeat",  
        success: function(dat){
            if (dat == "心跳更新失败！") {
                location.replace(location)
            }
        }
    });
}

var heartbeattimer = setInterval(heartbeat, 20 * 1000)

window.onunload = window.onbeforeunload = function(){
    player.dispose()
    stop()
    clearInterval(heartbeattimer)
}
</script>
